import{d as t,M as l,A as r,h as a}from"./Anchors-CRD96j4l.js";import{D as o,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const c={path:"/form/select",name:"select",title:"Select 选择框"};function d(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...n.components};return l(a,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),c.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(o,{columns:2}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Option, Select } from "cui-solid"

export default () => {
    return <Select>
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:t(e.p,{children:"基础用法"})}),t(i,{id:"disabled",title:"禁用",src:"2disabled.demo.tsx",code:`import { Option, Select } from "cui-solid"

export default () => {
    return <>
        <Select disabled>
            <Option value={1} label="北京" />
            <Option value={2} label="上海" />
            <Option value={3} label="杭州" />
            <Option value={4} label="武汉" />
            <Option value={5} label="天津" />
        </Select>

        <Select>
            <Option value={1} label="北京" />
            <Option value={2} label="上海" disabled />
            <Option value={3} label="杭州" />
            <Option value={4} label="武汉" />
            <Option value={5} label="天津" />
        </Select>
    </>
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"disabled"})," 进行禁用"]})}),t(i,{id:"size",title:"尺寸",src:"3size.demo.tsx",code:`import { Col, Option, Row, Select } from "cui-solid"

export default () => {
    return <Row>
        <Col grid={0.33}>
            <Select size="large">
                <Option value={1} label="北京" />
                <Option value={2} label="上海" />
                <Option value={3} label="杭州" />
                <Option value={4} label="武汉" />
                <Option value={5} label="天津" />
            </Select>
        </Col>
        <Col grid={0.33}>
            <Select>
                <Option value={1} label="北京" />
                <Option value={2} label="上海" />
                <Option value={3} label="杭州" />
                <Option value={4} label="武汉" />
                <Option value={5} label="天津" />
            </Select>
        </Col>
        <Col grid={0.33}>
            <Select size="small">
                <Option value={1} label="北京" />
                <Option value={2} label="上海" />
                <Option value={3} label="杭州" />
                <Option value={4} label="武汉" />
                <Option value={5} label="天津" />
            </Select>
        </Col>
    </Row>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"size"})," 支持",t(e.code,{className:"sp-inline-code",children:"small"}),"和",t(e.code,{className:"sp-inline-code",children:"large"})]})}),t(i,{id:"clearable",title:"可清空",src:"4clearable.demo.tsx",code:`import { Option, Select } from "cui-solid"

export default () => {
    return <Select clearable placeholder="请选择">
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"clearable"})," 后选择框选择后可清空"]})}),t(i,{id:"multi",title:"多选",src:"5multi.demo.tsx",code:`import { Option, Select } from "cui-solid"

export default () => {
    return <Select multi style={{'width': '200px'}}>
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"multi"})," 选择框可进行多选"]})}),t(i,{id:"showmax",title:"显示个数",src:"6showmax.demo.tsx",code:`import { Option, Select } from "cui-solid"

export default () => {
    return <Select multi showMax={2}>
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:t(e.p,{children:"多选场景下可限制最多显示个数， 超出的显示n+"})}),t(i,{id:"valueClosable",title:"值可关闭",src:"7valueClosable.demo.tsx",code:`import { Option, Select } from "cui-solid"

export default () => {
    return <Select multi showMax={2} valueClosable>
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"valueClosable"})," 选中的值可消除"]})}),t(i,{id:"group",title:"分组显示",src:"8group.demo.tsx",code:`import { Option, OptionGroup, Select } from "cui-solid"

export default () => {
    return <Select clearable >
        <OptionGroup label="直辖市" value={1}>
            <Option value={11} label="北京"/>
            <Option value={5} label="天津"/>
            <Option value={2} label="上海"/>
        </OptionGroup>
        <OptionGroup label="浙江" value={3}>
            <Option value={31} label="杭州"/>
        </OptionGroup>
        <Option value={4} label="武汉"/>
    </Select>
}`,scopes:void 0,children:t(e.p,{children:"设置 data 中使用children进行分组"})}),t(i,{id:"filter",title:"过滤",src:"9filter.demo.tsx",code:`import { Option, Select, Space } from "cui-solid"

export default () => {
    return <Space>
        <Select clearable filter >
            <Option value={1} label="北京" />
            <Option value={2} label="上海" />
            <Option value={3} label="杭州" />
            <Option value={4} label="武汉" />
            <Option value={5} label="天津" />
        </Select>
        <Select clearable filter multi>
            <Option value={1} label="北京" />
            <Option value={2} label="上海" />
            <Option value={3} label="杭州" />
            <Option value={4} label="武汉" />
            <Option value={5} label="天津" />
        </Select>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"filter"})," 支持过滤选择"]})}),t(i,{id:"remote",title:"远程过滤",src:"10remote.demo.tsx",code:`import { createSignal, For } from "solid-js";
import { Option, Select, Space } from "cui-solid"

export default () => {
    const [loading, setLoading] = createSignal<boolean>(false);
    const [filteredData, setFilteredData] = createSignal<any[]>([]);
    const [filteredData2, setFilteredData2] = createSignal<any[]>([]);

    const remoteQuery = (query: string) => {
        console.log(query);
        setLoading(true)
        const arr = new Array(10).fill(0).map((_, index) => ({value: query + index, label: query + index}))
        setFilteredData(arr);
        setLoading(false)
    }

    const remoteQuery2 = (query: string) => {
        console.log(query);
        setLoading(true)
        const arr = new Array(10).fill(0).map((_, index) => ({value: query + index, label: query + index}))
        setFilteredData2(arr);
        setLoading(false)
    }

    return <Space>
        <Select clearable filter remoteMethod={remoteQuery} loading={loading()}>
            <For each={filteredData()}>{item => {
                return <Option value={item.value} label={item.label} />
            }}</For>
        </Select>
        <Select clearable filter multi remoteMethod={remoteQuery2} loading={loading()}>
            <For each={filteredData2()}>{item => {
                return <Option value={item.value} label={item.label} />
            }}</For>
        </Select>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["远程过滤，通过",t(e.code,{className:"sp-inline-code",children:"remoteMethod"}),"进行查询，重置选项，",t(e.code,{className:"sp-inline-code",children:"loading"}),"属性，切换加载状态"]})}),t(i,{id:"default_labels",title:"默认文案",src:"11default_labels.demo.tsx",code:`import { createSignal, For } from "solid-js";
import { Option, Select, Space } from "cui-solid"

export default () => {
    const [val1, setVal1] = createSignal<string>('val1');
    const [val2, setVal2] = createSignal<string[]>(['val1']);
    const [loading, setLoading] = createSignal<boolean>(false);
    const [filteredData, setFilteredData] = createSignal<any[]>([]);
    const [filteredData2, setFilteredData2] = createSignal<any[]>([]);

    const remoteQuery = (query: string) => {
        console.log(query);
        setLoading(true)
        const arr = new Array(10).fill(0).map((_, index) => ({value: query + index, label: query + index}))
        setFilteredData(arr);
        setLoading(false)
    }

    const remoteQuery2 = (query: string) => {
        console.log(query);
        setLoading(true)
        const arr = new Array(10).fill(0).map((_, index) => ({value: query + index, label: query + index}))
        setFilteredData2(arr);
        setLoading(false)
    }

    return <Space>
        <Select clearable filter remoteMethod={remoteQuery} loading={loading()} value={[val1, setVal1]} defaultLabel="默认值">
            <For each={filteredData()}>{item => {
                return <Option value={item.value} label={item.label} />
            }}</For>
        </Select>
        <Select clearable filter multi remoteMethod={remoteQuery2} loading={loading()} value={[val2, setVal2]} defaultLabel={['值1']}>
            <For each={filteredData2()}>{item => {
                return <Option value={item.value} label={item.label} />
            }}</For>
        </Select>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["远程过滤支持默认值和默认label，通过属性",t(e.code,{className:"sp-inline-code",children:"defaultLabel"}),"设置"]})}),t(i,{id:"renderOption",title:"自定义渲染",src:"12renderOption.demo.tsx",code:`import { BothSide, Option, Select } from "cui-solid"

export default () => {

    return <Select clearable renderOption={(item: any) => {
        return <BothSide>
            <div>{item.label}</div>
            <div>{item.value}</div>
        </BothSide>
    }}>
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"renderOption"})," 属性可以自定义选项的渲染方式"]})}),t(i,{id:"prefix",title:"前缀",src:"13prefix.demo.tsx",code:`import { Icon, Option, Select } from "cui-solid"

export default () => {

    return <Select clearable prefix={<Icon name="tag"/>}>
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"prefix"})," 属性可以添加前缀"]})}),t(i,{id:"emptyOption",title:"空选项",src:"14emptyOption.demo.tsx",code:`import { Icon, Option, Select } from "cui-solid"

export default () => {

    return <Select clearable prefix={<Icon name="tag"/>} emptyOption="全部">
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"emptyOption"})," 支持空选项,并指定文案"]})}),t(i,{id:"transfer",title:"Transfer",src:"15transfer.demo.tsx",code:`import { Option, Select } from "cui-solid"

export default () => {

    return <Select clearable transfer>
        <Option value={1} label="北京" />
        <Option value={2} label="上海" />
        <Option value={3} label="杭州" />
        <Option value={4} label="武汉" />
        <Option value={5} label="天津" />
    </Select>
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"Portal"})," 将弹层放置于 ",t(e.code,{className:"sp-inline-code",children:"body"})," 内"]})}),t(i,{id:"control",title:"可控",src:"16control.demo.tsx",code:`import { Button, Option, Select, Space } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [city, setCity] = createSignal<number>();

    return <Space>
        <Select value={[city, setCity]} clearable emptyOption="全部" onChange={(v: any) => {
            console.log(v);
        }}>
            <Option value={1} label="北京" />
            <Option value={2} label="上海" />
            <Option value={3} label="杭州" />
            <Option value={4} label="武汉" />
            <Option value={5} label="天津" />
        </Select>
        <Button type="primary" onClick={() => {
            setCity(2);
        }}>改变值</Button>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"value"})," 为可控属性"]})}),t(i,{id:"largelist",title:"超大列表",src:"17largelist.demo.tsx",code:`import { Option, Select } from "cui-solid"
import { For } from "solid-js";

export default () => {
    const largeArray = new Array(1000).fill(0).map((_, index) => ({value: index, num: 1 + Math.round(Math.random() * 20) }))

    return <Select filter>
        <For each={largeArray}>
            {(item, index) => {
                return <Option value={item.value} label={\`\${new Array(item.num).fill(true).map(() => 'Row').join(" ")} Row \` + index()} />
            }}
        </For>
    </Select>
}`,scopes:void 0,children:t(e.p,{children:"支持超大列表"})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"name属性"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"value"}),t(e.td,{style:{textAlign:"left"},children:"值，可控属性"}),t(e.td,{style:{textAlign:"left"},children:"Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"size"}),t(e.td,{style:{textAlign:"left"},children:"尺寸"}),t(e.td,{style:{textAlign:"left"},children:"small  |  large"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"clearable"}),t(e.td,{style:{textAlign:"left"},children:"可清空"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"placeholder"}),t(e.td,{style:{textAlign:"left"},children:"placeholder"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"multi"}),t(e.td,{style:{textAlign:"left"},children:"多选"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"prefix"}),t(e.td,{style:{textAlign:"left"},children:"前缀"}),t(e.td,{style:{textAlign:"left"},children:"string | JSXElement"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"传入的数据"}),t(e.td,{style:{textAlign:"left"},children:"Array"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"textField"}),t(e.td,{style:{textAlign:"left"},children:"文案字段"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"label"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"valueField"}),t(e.td,{style:{textAlign:"left"},children:"值字段"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"value"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"filter"}),t(e.td,{style:{textAlign:"left"},children:"支持过滤"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"renderOption"}),t(e.td,{style:{textAlign:"left"},children:"自定义选项渲染"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"emptyOption"}),t(e.td,{style:{textAlign:"left"},children:"空选项"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"showMax"}),t(e.td,{style:{textAlign:"left"},children:"多选场景下最多显示个数"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"valueClosable"}),t(e.td,{style:{textAlign:"left"},children:"值可关闭"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"transfer"}),t(e.td,{style:{textAlign:"left"},children:"下拉内容使用Portal渲染"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"align"}),t(e.td,{style:{textAlign:"left"},children:"下拉内容位置"}),t(e.td,{style:{textAlign:"left"},children:"bottomLeft | bottomRight"}),t(e.td,{style:{textAlign:"left"},children:"bottomLeft"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"showMore"}),t(e.td,{style:{textAlign:"left"},children:"多选设置showMax后是否在数字上显示更多"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"ref"}),t(e.td,{style:{textAlign:"left"},children:"组件引用"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"remoteMethod"}),t(e.td,{style:{textAlign:"left"},children:"远程过滤"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"debounceTime"}),t(e.td,{style:{textAlign:"left"},children:"防抖时间"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"},children:"300"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"loading"}),t(e.td,{style:{textAlign:"left"},children:"远程过滤的状态"}),t(e.td,{style:{textAlign:"left"},children:"Boolean"}),t(e.td,{style:{textAlign:"left"},children:"false"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"defaultLabel"}),t(e.td,{style:{textAlign:"left"},children:"远程过滤的默认label,配合默认value使用"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"string[]"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onChange"}),t(e.td,{style:{textAlign:"left"},children:"值改变事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"option_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#option_props",children:t(e.span,{className:"icon icon-link"})}),"Option 属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"label"}),t(e.td,{style:{textAlign:"left"},children:"显示内容"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"value"}),t(e.td,{style:{textAlign:"left"},children:"值"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),t(e.tbody,{children:l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onChange"})}),t(e.td,{style:{textAlign:"left"},children:"值改变事件"}),t(e.td,{style:{textAlign:"left"},children:"value: any, option?: any"})]})})]})]}),`
`,`
`,`
`,t(r,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"disabled",title:"禁用",src:"2disabled.demo.tsx"},{id:"size",title:"尺寸",src:"3size.demo.tsx"},{id:"clearable",title:"可清空",src:"4clearable.demo.tsx"},{id:"multi",title:"多选",src:"5multi.demo.tsx"},{id:"showmax",title:"显示个数",src:"6showmax.demo.tsx"},{id:"valueClosable",title:"值可关闭",src:"7valueClosable.demo.tsx"},{id:"group",title:"分组显示",src:"8group.demo.tsx"},{id:"filter",title:"过滤",src:"9filter.demo.tsx"},{id:"remote",title:"远程过滤",src:"10remote.demo.tsx"},{id:"default_labels",title:"默认文案",src:"11default_labels.demo.tsx"},{id:"renderOption",title:"自定义渲染",src:"12renderOption.demo.tsx"},{id:"prefix",title:"前缀",src:"13prefix.demo.tsx"},{id:"emptyOption",title:"空选项",src:"14emptyOption.demo.tsx"},{id:"transfer",title:"Transfer",src:"15transfer.demo.tsx"},{id:"control",title:"可控",src:"16control.demo.tsx"},{id:"largelist",title:"超大列表",src:"17largelist.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"option_props",depth:2,title:"Option 属性"},{id:"events",depth:2,title:"事件"}]})]})}function u(n={}){const{wrapper:e}=n.components||{};return e?t(e,{...n,children:t(d,{...n})}):d(n)}export{u as default,c as frontmatter};
